<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- Standard Meta -->
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

    <!-- Site Properties -->
    <title>视频 | Any Video</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/semantic-ui/2.2.10/semantic.min.js"></script>
    <link href="/css/style.css" rel="stylesheet">
    <script src="/js/siderbar.js"></script>
</head>

<body>

<div th:replace="~{header :: fmenu}"></div>

<div th:replace="~{header :: smenu}"></div>

<div class="pusher">

    <div th:replace="~{header :: pmenu}"></div>

    <div class="nav-divider"></div>

    <div class="ui container">

        <div class="ui pointing menu blue" id="videoType">
            <a class="item active video-type" data-value="1">电视剧</a>
            <a class="item video-type" data-value="2">电影</a>
            <a class="item video-type" data-value="3">综艺</a>
            <a class="item video-type" data-value="4">动漫</a>
        </div>

        <div class="ui active centered inline loader margin-top" id="itemLoader"></div>

        <div class="ui segment">
            <div class="ui five column doubling grid" id="itemsDiv">

            </div>
        </div>

    </div>

    <div class="ui hidden divider"></div>
</div>
</div>

<script id="itemTemplate" type="text/html">
    <div class="column videoItem">
        <div class="ui fluid link card">
            <a class="image videoUrl" href="">
                <img class="videoImage" src="" alt="">
            </a>
            <div class="content">
                <a class="videoTitle"></a>
            </div>
        </div>
    </div>
</script>

<script>

    var itemsDiv = $('#itemsDiv');
    var itemLoder = $('#itemLoader');
    /** 创建列表内容 */
    function createItem(data) {
        var $item = $($('#itemTemplate').html());
        $item.find('a.videoUrl').eq(0).attr('href', '/view?u=' + data.value);
        $item.find('img.videoImage').eq(0).attr('src', data.image);
        $item.find('a.videoTitle').eq(0).text(data.title);
        return $item;
    }

    /** 渲染列表内容 */
    function renderList(data) {
        itemLoder.attr('class', '');
        itemsDiv.html('');
        for (var i = 0; i < data.length; i++) {
            var item = createItem(data[i]);
            itemsDiv.append(item);
        }
    }

</script>

<script>
    var baseApi = "/videos/";
    var source = 0;
    var type = 1;

    /** 加载默认视频列表 */
    $(document).ready(function () {
        var api = baseApi + type;
        $.get(api, function (data) {
            itemLoder.attr('class', '');
            renderList(data);
        });
    });

    /** 切换视频源 **/
    $('.source-type').click(function () {
        source = parseInt($(this).attr('data-value'));
        type = source + 1;
        for (var i=0; i<4; i++){
            $(this).parent().find('a').eq(i).attr('class', 'item source-type');
        }
        $(this).attr('class', 'item active source-type');
        var videoTypeList = $("#videoType");
        for (var j=0; j<4; j++){
            videoTypeList.find('a').eq(j).attr('class', 'item video-type');
        }
        videoTypeList.find('a').eq(0).attr('class', 'item active item-type');
        var api = baseApi + type;
        itemLoder.attr('class', 'ui active centered inline loader margin-top');
        $.get(api, function (data) {
            renderList(data);
        });
    });

    /** 切换视频类型 **/
    $('.video-type').click(function () {
        type = parseInt($(this).attr('data-value')) + source;
        for (var i=0; i<4; i++){
            $(this).parent().find('a').eq(i).attr('class', 'item video-type');
        }
        $(this).attr('class', 'item active item-type');
        var api = baseApi + type;
        itemLoder.attr('class', 'ui active centered inline loader margin-top');
        $.get(api, function (data) {
            renderList(data);
        });
    });

</script>
</body>

</html>
